<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>192.168.1.146</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body,html{
				width: 100%;
				height: 100%;
			}
			h1{
				width: 400px;
				height: 40px;
				line-height: 40px;
				margin: 20px auto;
			}
			.box{
				width: 100%;
				height: 200px;
				background: #c7c7c7;
				margin-top:100px ;
			}
			.enter{
				width: 400px;
				height: 50px;
				line-height: 50px;
				font-size: 16px;
				margin: 0 auto;
			}
			.enter input{
				margin: 0 20px 0 0;
			}
			.send{
				display: inline-block;
				padding: 0px 15px;
				line-height: 25px;
				background: #fff;
				border-radius: 15px;
				font-size: 13px;
				cursor: pointer;
			}
			.news{
				display: inline-block;
				min-width: 60px;
				height: 25px;
				background: #FFFFFF;
				line-height: 25px;
			}
		</style>
	</head>
	<body>
		<h1>192.168.1.146</h1>
		<div class="box">
			<p class="enter">输入：<input type="text" value="" id="inputText"><span class="send" onclick="Conncet()">发布</span></p>
			<p class="enter">订阅的消息：<span class="news"></span></p>
		</div>
		<script src="jquery.min.js"></script>
		<script src="paho-mqtt-min.js"></script>
		<script>
			client = new Paho.MQTT.Client("120.24.75.149", Number(9001), "");
			client.onConnectionLost = onConnectionLost;
			client.onMessageArrived = onMessageArrived;
			client.connect({onSuccess:onConnect});
			//连接时调用
			function onConnect(){
				debugger
				console.log('onConnect');
				client.subscribe('World');
				var news = $('#inputText').val();
				message = new Paho.MQTT.Message(news);
				message.destinationName = 'World';
				client.send(message);
			};
			//连接丢失
			function onConnectionLost(){
				if (responseObject.errorCode !== 0) {
					console.log("onConnectionLost:"+responseObject.errorMessage);
				}
			};
			//消息到达时
			function onMessageArrived(message){
				$('.news').text(message.payloadString);
//				alert(message.payloadString)
			};
			function Conncet(){
				onConnect()
				$('#inputText').val('');
			};
		</script>
	</body>
</html>
